<template>
  <el-dialog v-model="visibleLocal" title="新增菜单" width="500px" @close="onClose">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="90px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入菜单名称" />
      </el-form-item>
      <el-form-item label="路径" prop="path">
        <el-input v-model="form.path" placeholder="以 / 开头，如 /dashboard" />
      </el-form-item>
      <el-form-item label="排序" prop="order">
        <el-input v-model="form.order" placeholder="数字字符串，如 10" />
      </el-form-item>
      <el-form-item label="ACL" prop="acl">
        <el-input v-model="form.acl" placeholder="访问控制标识" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="onClose">取消</el-button>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";

const props = defineProps<{ visible: boolean }>();
const emit = defineEmits<{
  (e: "update:visible", v: boolean): void;
  (e: "submit", data: { name: string; path: string; order: string; acl: string }): void;
}>();

const visibleLocal = ref(props.visible);
watch(
  () => props.visible,
  (v) => (visibleLocal.value = v),
);

const formRef = ref();
const form = ref({ name: "", path: "", order: "", acl: "" });

const rules = {
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  path: [{ required: true, message: "请输入路径", trigger: "blur" }],
  order: [{ required: true, message: "请输入排序", trigger: "blur" }],
  acl: [{ required: true, message: "请输入ACL", trigger: "blur" }],
};

const onClose = () => emit("update:visible", false);
const onSubmit = () => {
  (formRef.value as any).validate((valid: boolean) => {
    if (valid) {
      emit("submit", { ...form.value });
    }
  });
};
</script>
